<template>
<div class="list-tabbar" ref="listbar2">
  <ul>
    <li v-for="(item, index) in listTabbar" :key="index" @click="changeActive(index)">
      <span :class="{ active: index==currentIndex}">{{ item }}</span>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  props: {
    listTabbar: {
      type: Array,
      default () {
        return []
      }
    },
    flag: { // 用于区分点击的是哪个ListBar， 因为如果几点的是第一个话，要让页面滚动到顶部
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      currentIndex: 0
    }
  },
  created () {
  },
  mounted () {

  },
  methods: {
    changeActive (index) {
      this.currentIndex = index
      this.$emit('getProductList', index, this.flag)
    }
  }
}
</script>
<style lang="less" scoped>
/* @import ''; 引入css类 */
// 实现吸顶的方式一： 但是sticky的兼容性较差
// .list-tabbar {
//  position: sticky;
//   top: 44px;
// }
.list-tabbar {
  // position: sticky;
  // top: 44px;
  // margin-top: 5px;
 ul {
  display: flex;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  background-color: #fff;
  li {
    flex: 1;
    span {
      padding: 6px;
      &.active {
        border-bottom: 2px solid var(--color-high-text)
      }
    }
  }
}
}
</style>
